<%--
  Created by IntelliJ IDEA.
  User: xiaomi
  Date: 2025/2/3
  Time: 13:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>添加课程</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/zh.js"></script>
    <style>
        /* 整体页面的布局和背景颜色 */
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            width: 50%;
            margin: auto;
            position: relative;
        }

        /* 表单样式 */
        form {
            position: relative;
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        /* 标签和输入框在同一行显示 */
        label {
            display: flex;
            margin-bottom: 5px;
            color: #555;
            width: 100px; /* 设置固定宽度 */
            text-align: right;
            margin-right: 30px;
        }

        input[type="number"],
        input[type="text"],
        select {
            width: calc(100% - 200px);; /* 设定为合适的宽度 */
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
            position: relative; /* 确保选择器相对于输入框显示 */
            display: block; /* 修改为 block */
            z-index: auto;
        }
        /* 每个表单项的容器 */
        .form-item {
            position: relative;
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        /* 按钮样式 */
        button {
            background: rgb(165, 184, 213);
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }


        button:hover {
            background-color: #0056b3;
        }

        /* 画布样式 */
        canvas {
            border: 1px solid #87A7D9;
            margin-bottom: 15px;
        }

        .numInput.flatpickr-hour {
            width: 40px; /* 调整为合适的宽度 */
        }

        .numInput.flatpickr-minute {
            width: 40px; /* 调整为合适的宽度 */
        }
    </style>
</head>
<body>
<form>
    <div class="form-item">
        <label for="picture">课程图片:</label>
        <input type="text" id="picture" placeholder="请输入图片URL">
    </div>
    <div class="form-item">
        <label for="classname">课程名称:</label>
        <input type="text" id="classname" name="classname" required>
    </div>
    <div class="form-item">
        <label for="classtype">课程类型:</label>
        <select id="classtype" name="classtype" required>
            <option value="团课">团课</option>
            <option value="私教课">私教课</option>
        </select>
    </div>
    <div class="form-item">
        <label for="money">价格:</label>
        <input type="text" id="money" name="money" required>
    </div>
    <div class="form-item">
        <label for="number">课程人数:</label>
        <input type="text" id="number" name="number" required>
    </div>
    <div id="private-teacher-context" class="form-item" style="display: none;">
        <label for="privateContext">课程内容:</label>
        <input type="text" id="privateContext" name="privateContext">
    </div>
    <div class="form-item" style="display: flex;" id="classtime">
        <label for="datetime">上课时间:</label>
        <input type="text" id="datetime" name="datetime"  placeholder="选择日期和时间">
    </div>
    <span id = "time-error" style="color: red; display: none;">该时间段重复选择</span>
    <div class="form-item">
        <label for="usertools">时长:</label>
        <input type="text" id="usertools" name="usertools" required>
    </div>
    <div class="form-item" style="justify-content: center;">
        <button type="submit" onclick="addlist()">添加课程</button>
    </div>
</form>
<script>
    $(function () {
        // 从sessionStorage获取工作日信息，格式为"周一、周二、周三"
        var workDaysStr = sessionStorage.getItem('intimate');

        // 将工作日字符串转换为flatpickr需要的数字格式
        var enabledDays = [];
        if (workDaysStr) {
            // 中文顿号分隔
            var days = workDaysStr.split('、');

            var dayMapping = {
                "周一": 1,
                "周二": 2,
                "周三": 3,
                "周四": 4,
                "周五": 5,
                "周六": 6,
                "周日": 0
            };

            days.forEach(function(day) {
                day = day.trim(); // 去除前后空格
                console.log("处理星期:", day, "→", dayMapping[day]);
                if (dayMapping[day] !== undefined) {
                    enabledDays.push(dayMapping[day]);
                }
            });
        }
        // 配置flatpickr
        flatpickr("#datetime", {
            enableTime: true,
            dateFormat: "Y/m/d H:i",
            time_24hr: true,
            minuteIncrement: 30,
            locale: "zh",
            minDate: new Date(),
            position: "below",
            disable: [
                function(date) {
                    // 如果enabledDays有值且当前日期不在允许的工作日中，则禁用
                    return enabledDays.length > 0 && !enabledDays.includes(date.getDay());
                }
            ],
            onChange: function(selectedDates, dateStr, instance) {
                checkTimeAvailability(dateStr);
            }
        });
    })
    function  checkTimeAvailability(time){
        var time = time;
        var classtype = "团课";
        var teachername = sessionStorage.getItem('username');
        var list={
            time: time,
            classtype: classtype,
            teachername: teachername
        };
        $.ajax({
            url: './teacher/list/searchTime',
            type: 'POST',
            data: JSON.stringify(list),
            contentType: "application/json",
            success: function (data) {
                console.log(data.data);
                if(data.data === 200){
                    document.getElementById("time-error").style.display = "inline";
                    document.getElementById("datetime").value = "";
                }else{
                    document.getElementById("time-error").style.display ="none";
                }
            },
            error: function (data) {
                alert('添加课程信息失败');
            }
        })
    }
    document.getElementById("classtype").addEventListener("change", function() {
        var selectedType = this.value;
        if (selectedType === "私教课") {
            document.getElementById("private-teacher-context").style.display = "flex";
            document.getElementById("classtime").style.display = "none";
        } else {
            document.getElementById("private-teacher-context").style.display = "none";
            document.getElementById("classtime").style.display = "flex";
        }
    });

    function addlist() {
        event.preventDefault();
        var teachername = sessionStorage.getItem('username');
        var classteacher = sessionStorage.getItem('name');
        var list = {
            picture: $("#picture").val(),
            teachername: teachername,
            classteacher: classteacher,
            classname: $("#classname").val(),
            classtype: $("#classtype").val(),
            context: $("#privateContext").val(),
            usertools: $("#usertools").val(),
            money: $("#money").val(),
            number: $("#number").val(),
            time: $("#datetime").val()
        };
        console.log(list);
        $.ajax({
            url: './teacher/addlist',
            type: 'POST',
            data: JSON.stringify(list),
            contentType: "application/json",
            success: function (data) {
                alert('添加课程信息成功');
                $("#picture").val('');
                $("#classname").val('');
                $("#classtype").val('团课');
                $("#money").val('');
                $("#number").val('');
                $("#privateContext").val('');
                $("#datetime").val('');
                $("#usertools").val('');
                // 隐藏私教课相关内容
                document.getElementById("private-teacher-context").style.display = "none";
                document.getElementById("classtime").style.display = "flex";
                // 隐藏错误提示
                document.getElementById("time-error").style.display ="none";
            },
            error: function (data) {
                alert('添加课程信息失败');
            }
        });
    }
</script>
</body>
</html>